<template>
  <div class="app-container">
    <el-card>
      <el-tabs v-model="activeTab" :before-leave="tabPaneBeforeLeave" @tab-click="handleClick">
        <el-tab-pane label="首页轮播图" name="slideImageTabPane">
          <el-upload
            class="upload-demo slide-image-upload"
            action="#"
            accept=".jpg,.jpeg,.png"
            :file-list="imageListArr"
            list-type="picture-card"
            :show-file-list="true"
            :auto-upload="true"
            :limit="5"
            :on-exceed="imageListSizeExceed"
            :before-upload="beforeImageUpload"
            :http-request="handleSlideImageUpload"
            :on-preview="handleImagePreview"
            :on-remove="handleSlideImageRemove"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
            <!--              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>-->
            <!--            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
          </el-upload>

          <div style="margin-top: 40px">
            <span style="font-size: 15px;font-weight: 700">提示：</span>
            <ul style="font-size: 14px;margin-left: 8px">
              <li>1, 只能上传jpg/png格式的图片，且大小不能超过5MB;</li>
              <li>2, 最多只允许上传5张图片;</li>
            </ul>
          </div>
        </el-tab-pane>
        <el-tab-pane label="首页描述文字及小图标" name="descriptionAndIcons">
          <!--包船小图标-->
          <div>
            <span style="font-size: 14px;font-weight: 700">包船小图标：</span>
            <el-upload
              class="upload-demo icon-upload"
              action="#"
              :file-list="baochuanIconList"
              :show-file-list="true"
              :auto-upload="true"
              list-type="picture-card"
              accept=".jpg,.jpeg,.png"
              :limit="1"
              :on-exceed="baochuanIconListSizeExceed"
              :before-upload="beforeImageUpload"
              :http-request="handleBaochuanIconUpload"
              :on-preview="handleImagePreview"
              :on-remove="handleBaochuanIconRemove"
            >
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <!--              <el-button size="small" type="primary">点击上传</el-button>-->
              <!--              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>-->
              <div slot="tip" class="el-upload__tip">
                提示：最多只允许上传1个文件，且要求文件必须为jpg/png格式，大小不超过5MB;
              </div>
            </el-upload>
          </div>
          <!--包船说明文字-->
          <div class="desc_content">
            <span style="font-size: 14px;font-weight: 700">包船说明文字：</span>
            <div class="desc_content_input">
              <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="sysResource.baochuanDescText"
                maxlength="30"
                show-word-limit
                rows="3"
                clearable
                resize="none"
              >
              </el-input>
              <el-button size="mini" type="primary" @click="saveBaochuanDescText">保存</el-button>
            </div>
          </div>
          <!--拼船小图标-->
          <div style="margin-top: 25px;">
            <span style="font-size: 14px;font-weight: 700">拼船小图标：</span>
            <el-upload
              class="upload-demo icon-upload"
              action="#"
              :file-list="pinchuanIconList"
              :show-file-list="true"
              :auto-upload="true"
              list-type="picture-card"
              accept=".jpg,.jpeg,.png"
              :limit="1"
              :on-exceed="baochuanIconListSizeExceed"
              :before-upload="beforeImageUpload"
              :http-request="handlePinchuanIconUpload"
              :on-preview="handleImagePreview"
              :on-remove="handlePinchuanIconRemove"
            >
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <!--              <el-button size="small" type="primary">点击上传</el-button>-->
              <!--              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>-->
              <div slot="tip" class="el-upload__tip">
                提示：最多只允许上传1个文件，且要求文件必须为jpg/png格式，大小不超过5MB;
              </div>
            </el-upload>
          </div>
          <!--拼船说明文字-->
          <div class="desc_content">
            <span style="font-size: 14px;font-weight: 700">拼船说明文字：</span>
            <div class="desc_content_input">
              <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="sysResource.pinchuanDescText"
                maxlength="30"
                show-word-limit
                rows="3"
                clearable
                resize="none"
              >
              </el-input>
              <el-button size="mini" type="primary" @click="savePinchuanDescText">保存</el-button>
            </div>

          </div>
        </el-tab-pane>
        <el-tab-pane label="平台文档资料" name="documentFileTabPane">
          <div>
            <span style="font-size: 14px;font-weight: 700">隐私条款等相关文本文件：</span>
            <el-upload
              ref="privacyFileElUpload"
              class="upload-demo document-upload"
              action="#"
              :file-list="privacyFileList"
              :show-file-list="true"
              :auto-upload="true"
              accept=".pdf"
              :limit="5"
              :before-upload="beforePrivacyFileUpload"
              :on-exceed="privacyFileListSizeExceed"
              :http-request="handlePrivacyFileUpload"
              :on-remove="handlePrivacyFileRemove"
            >
              <!--            <i class="el-icon-plus avatar-uploader-icon"></i>-->
              <el-button size="small" type="primary">点击上传</el-button>
              <!--              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>-->
              <div slot="tip" class="el-upload__tip">
                提示：最多只允许上传5个文件，且要求文件必须为pdf格式，大小不超过5MB;
              </div>
            </el-upload>
          </div>

          <!--          <div style="margin-top: 35px">-->
          <!--            <span style="font-size: 14px;font-weight: 700">乘船指南：</span>-->
          <!--            <el-upload-->
          <!--              ref="boatingGuideFileElUpload"-->
          <!--              class="upload-demo document-upload"-->
          <!--              action="#"-->
          <!--              :file-list="boatingGuideFileList"-->
          <!--              :show-file-list="true"-->
          <!--              :auto-upload="true"-->
          <!--              accept=".pdf"-->
          <!--              :limit="1"-->
          <!--              :before-upload="beforeBoatingGuideFileUpload"-->
          <!--              :on-exceed="boatingGuideFileListSizeExceed"-->
          <!--              :http-request="handleBoatingGuideFileUpload"-->
          <!--              :on-remove="handleBoatingGuideFileRemove"-->
          <!--            >-->
          <!--              &lt;!&ndash;            <i class="el-icon-plus avatar-uploader-icon"></i>&ndash;&gt;-->
          <!--              <el-button size="small" type="primary">点击上传</el-button>-->
          <!--              &lt;!&ndash;              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>&ndash;&gt;-->
          <!--              <div slot="tip" class="el-upload__tip">提示：最多只允许上传1个文件，且要求文件必须为pdf格式，大小不超过5MB;-->
          <!--              </div>-->
          <!--            </el-upload>-->
          <!--          </div>-->

          <!--乘船须知富文本编辑区-->
          <div style="margin-top: 35px;width: 900px">
            <span style="font-size: 15px;font-weight: 700">乘船须知：</span>
            <vue-ueditor-wrap v-model="sysResource.boatingNoticeContent" :config="editorConfig"
                              editor-id="boatingNoticeContentUeditor"
                              @ready="boatingNoticeContentUeditorReady"></vue-ueditor-wrap>
            <div style="text-align: right">
              <el-button type="primary" size="mini" style="margin-top: 5px" @click="submitBoatingNoticeContent">提交
              </el-button>
            </div>

          </div>

          <!--乘船指南富文本编辑区-->
          <div style="margin-top: 35px;width: 900px">
            <span style="font-size: 15px;font-weight: 700">乘船指南：</span>
            <vue-ueditor-wrap v-model="sysResource.boatingGuideContent" :config="editorConfig"
                              editor-id="boatingGuideContentUeditor"
                              @ready="boatingGuideContentUeditorReady"></vue-ueditor-wrap>
            <div style="text-align: right">
              <el-button type="primary" size="mini" style="margin-top: 5px" @click="submitBoatingGuideContent">提交
              </el-button>
            </div>
          </div>

          <!--关于我们富文本编辑区-->
          <div style="margin-top: 35px;width: 900px">
            <span style="font-size: 15px;font-weight: 700">关于我们：</span>
            <vue-ueditor-wrap v-model="sysResource.aboutWe" :config="editorConfig"
                              editor-id="aboutWeUeditor"
                              @ready="aboutWeUeditorReady"></vue-ueditor-wrap>
            <div style="text-align: right">
              <el-button type="primary" size="mini" style="margin-top: 5px" @click="submitAboutWe">提交
              </el-button>
            </div>
          </div>

        </el-tab-pane>
      </el-tabs>
    </el-card>

    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import oss from "@/utils/oss"
// import draggable from 'vuedraggable';
import {
  deleteBaochuanIcon,
  deleteBoatingGuideFile,
  deletePinchuanIcon,
  getSysResource, updateAboutWe,
  updateBaochuanDescText,
  updateBaochuanIcon,
  updateBoatingGuideContent,
  updateBoatingGuideFile,
  updateBoatingNoticeContent,
  updatePinchuanDescText,
  updatePinchuanIcon,
  updatePrivacyFiles,
  updateSlidePictures
} from "@/api/miniprogram/system"

export default {
  name: "Resource",
  // components: {draggable},
  data() {
    // const boatingNoticeContent = ref('<h2>Hello World!</h2>');
    return {
      activeTab: "slideImageTabPane", //景区基本信息
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [],
      imageListArr: [],
      imageNameArr: [], //轮播图名称数组
      slideImgSize: 0, //当前已上传的轮播图个数
      privacyFileList: [], //隐私条款文件列表。
      tempPrivacyFileList: [], //隐私条款文件临时列表。
      boatingGuideFileList: [], //乘船指南文件列表，一般只有一个文件。
      baochuanIconList: [],//包船图标文件列表
      pinchuanIconList: [],//包船图标文件列表
      // baochuanDescText: "",
      // pinchuanDescText: "",
      sysResource: {}, //系统资源对象
    }
  },
  created() {
    // 更多 UEditor 配置，参考 http://fex.baidu.com/ueditor/#start-config
    this.editorConfig = {
      UEDITOR_HOME_URL: '/UEditor/', // 访问 UEditor 静态资源的根路径，可参考常见问题1
      // serverUrl: '//ueditor.zhenghaochuan.com/cos', // 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
      // serverUrl: 'https://ueditor.zhenghaochuan.com/cos', // 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
      initialFrameWidth: 900,  //初始化编辑器宽度,默认1000
      initialFrameHeight: 300, //初始化编辑器高度,默认320

      readonly: false, //编辑器初始化结束后,编辑区域是否是只读的，默认是false

      wordCount: true,          //是否开启字数统计，默认true
      maximumWords: 5000,       //允许的最大字符数,默认10000
      //字数统计提示，{#count}代表当前字数，{#leave}代表还可以输入多少字符数,留空支持多语言自动切换，否则按此配置显示
      //提示的默认内容：当前已输入 {#count} 个字符，您还可以输入{#leave} 个字符
      wordCountMsg: '当前已输入 {#count} 个字符，您还可以输入{#leave} 个字符',
      //超出字数限制提示  留空支持多语言自动切换，否则按此配置显示
      //提示默认内容：'<span style="color:red;">你输入的字符个数已经超出最大允许值，服务器可能会拒绝保存！</span>'
      wordOverFlowMsg: '<span style="color:red;">你输入的字符个数已经超出最大允许值，服务器可能会拒绝保存！</span>',

      //启用自动保存,默认true
      enableAutoSave: true,
      //自动保存间隔时间，单位ms,默认500ms
      saveInterval: 500,

      //工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义
      toolbars: [[
        '|', 'undo', 'redo', '|',
        'bold', 'italic', 'underline',
        'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
        'paragraph', 'fontfamily', 'fontsize', '|',
        'indent', '|', 'source',
        'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
        'link', 'unlink', '|',
        '|',
        'print',
        'preview',
        'searchreplace',
        // 'drafts',
        // 'help',
      ]]
    };
  },
  mounted() {
    //获取平台系统资源
    getSysResource().then(res => {
      console.log("mounted sysResource res: ", res)
      this.sysResource = res.data;
      let privacyPolicyFilename = this.sysResource.privacyPolicyFilename;
      if (privacyPolicyFilename) {
        let fileNameArr = privacyPolicyFilename.split(",");
        let tempArr = [];
        fileNameArr.forEach((fileName, index) => {
          tempArr.push({
            name: fileName,
            url: oss.signatureUrl(fileName),
          });
        })
        this.privacyFileList = this.tempPrivacyFileList = tempArr;
      }
    }).catch(err => {
      console.log("mounted sysResource err: ", err)
    });

    this.getSlidePictureList();
    this.getDocumentFileList();
    this.getDescAndIconList();
  },
  methods: {
    // tabs标签页切换事件
    handleClick(tab, event) {
      console.log("handleClick: ", tab, event);
      if (tab.index === "0") {
        // this.getSlidePictureList();
      } else if (tab.index === "1") {
        // this.getDocumentFileList();
      } else if (tab.index === "2") {
        // this.getDocumentFileList();
      } else {
        //网络请求3
      }
    },
    tabPaneBeforeLeave(activeName, oldActiveName) {
      console.log("tabPaneBeforeLeave: ", activeName, oldActiveName)
      if (oldActiveName === "documentFileTabPane") {
        // this.$refs.privacyFileElUpload.clearFiles();
        // this.$refs.boatingGuideFileElUpload.clearFiles();
      }
    },
    getFileSuffixName(name) {
      return name.substring(name.lastIndexOf("."));//.txt
    },
    getFileNameUUID() {
      function rx() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
      }

      return `${+new Date()}_${rx()}${rx()}`
    },
    beforeImageUpload(file) {
      // 限制上传类型
      // const fileExtensions = this.getFileName(file.name) === '.doc' || this.getFileName(file.name) === '.docx' || this.getFileName(file.name) === '.pdf'
      const fileExtensions = this.getFileSuffixName(file.name) === '.jpg' || this.getFileSuffixName(file.name) === '.png'
      //限制文件大小上限为5M
      const max20M = file.size / 1024 / 1024 < 5;
      if (!fileExtensions) {
        // this.$message.error('上传文件类型只能是 .doc, .docx, .pdf 格式!');
        this.$message.error('只能上传.jpg, .png格式的图片!');
      }
      if (!max20M) {
        this.$message.error('上传图片大小不能超过 5MB!');
      }
      return fileExtensions && max20M;
    },
    beforePrivacyFileUpload(file) {
      // 限制上传类型
      // const fileExtensions = this.getFileSuffixName(file.name) === '.doc' || this.getFileSuffixName(file.name) === '.docx' || this.getFileSuffixName(file.name) === '.pdf';
      const fileExtensions = this.getFileSuffixName(file.name) === '.pdf';
      //限制文件大小上限为5M
      const max5M = file.size / 1024 / 1024 < 5;
      if (!fileExtensions) {
        this.$message.error('只能上传pdf格式的文件!');
      }
      if (!max5M) {
        this.$message.error('上传文件大小不能超过 5MB!');
      }
      return fileExtensions && max5M;
    },
    beforeBoatingGuideFileUpload(file) {
      // 限制上传类型
      const fileExtensions = this.getFileSuffixName(file.name) === '.pdf';
      //限制文件大小上限为5M
      const max5M = file.size / 1024 / 1024 < 5;
      if (!fileExtensions) {
        this.$message.error('只能上传pdf格式的文件!');
      }
      if (!max5M) {
        this.$message.error('上传文件大小不能超过 5MB!');
      }
      return fileExtensions && max5M;
    },
    //自定义轮播图上传方法。注意：此方法必须返回一个promise对象，否则上传成功后file的状态不会自动更新为成功状态。
    handleSlideImageUpload(option) {
      console.log("handleSlideImageUpload: ", option, this.imageListArr)
      // 生成的文件名，保留文件后缀名，进行拼接
      let fileName = "slidePictures/" + this.getFileNameUUID() + this.getFileSuffixName(option.file.name)

      //同步上传
      // oss.putSync(`slidePictures/${fileName}`, option.file);
      //异步上传
      return new Promise((resolve, reject) => {
        oss.put(fileName, option.file).then(res => {
          //上传成功
          console.log("首页轮播图上传成功！res: ", res)
          this.imageNameArr.push(fileName);
          updateSlidePictures(this.imageNameArr).then(res => {
            console.log("首页轮播图上传成功！res: ", res)
            this.$message.success("上传成功！")
            resolve()
          }).catch(err => {
            console.log("首页轮播图上传失败！err: ", err)
            reject()
          })
        }).catch(err => {
          console.log("首页轮播图上传失败！err: ", err)
          this.$message.error('上传失败!');
          reject()
        });
      })
    },
    handleBaochuanIconUpload(option) {
      // 生成的文件名，保留文件后缀名，进行拼接
      let fileName = "baochuanIcon/" + this.getFileNameUUID() + this.getFileSuffixName(option.file.name)

      //异步上传
      return new Promise((resolve, reject) => {
        oss.put(fileName, option.file).then(res => {
          //oss上传成功
          updateBaochuanIcon(fileName).then(res => {
            this.$message.success("上传成功！")
            resolve()
          }).catch(err => {
            console.log("上传失败！err: ", err)
            reject()
          })
        }).catch(err => {
          console.log("上传失败！err: ", err)
          this.$message.error('上传失败!');
          reject()
        });
      })
    },
    handlePinchuanIconUpload(option) {
      // 生成的文件名，保留文件后缀名，进行拼接
      let fileName = "pinchuanIcon/" + this.getFileNameUUID() + this.getFileSuffixName(option.file.name)

      //异步上传
      return new Promise((resolve, reject) => {
        oss.put(fileName, option.file).then(res => {
          //oss上传成功
          updatePinchuanIcon(fileName).then(res => {
            this.$message.success("上传成功！")
            resolve()
          }).catch(err => {
            console.log("上传失败！err: ", err)
            reject()
          })
        }).catch(err => {
          console.log("上传失败！err: ", err)
          this.$message.error('上传失败!');
          reject()
        });
      })
    },
    //处理乘船须知上传。
    handlePrivacyFileUpload(option) {
      console.log("handlePrivacyFileUpload option: ", option)
      // console.log("handlePrivacyFileUpload this.privacyFileList: ", this.privacyFileList)
      // 生成的文件名，保留文件后缀名，进行拼接
      let fileName = "privacyFiles/" + option.file.name
      // let fileName = "boatingNoticeFile/" + "boatingNoticeFile" + this.getFileSuffixName(option.file.name)
      //异步上传
      return new Promise((resolve, reject) => {
        oss.put(fileName, option.file).then(res => {
          this.tempPrivacyFileList.push({
            name: fileName
          })
          let fileNameArr = [];
          this.tempPrivacyFileList.forEach(item => {
            fileNameArr.push(item.name)
          })
          let fileNames = fileNameArr.join(",");
          updatePrivacyFiles(fileNames).then(res => {
            //上传成功
            console.log("隐私条款文件上传成功！res: ", res)
            this.$message.success("上传成功！")
            resolve()
          }).catch(err => {
            console.log("隐私条款文件上传失败！err: ", err)
            this.$message.error('上传失败!');
          })

        }).catch(err => {
          console.log("隐私条款文件上传失败！err: ", err)
          this.$message.error('隐私条款文件上传失败!');
          reject()
        });
      })
    },
    handleBoatingGuideFileUpload(option) {
// 生成的文件名，保留文件后缀名，进行拼接
      let fileName = "boatingGuideFile/" + option.file.name
      //异步上传
      return new Promise((resolve, reject) => {
        oss.put(fileName, option.file).then(res => {
          updateBoatingGuideFile(fileName).then(res => {
            //上传成功
            console.log("乘船指南上传成功！res: ", res)
            this.$message.success("上传成功！")
            resolve()
          }).catch(err => {
            console.log("乘船指南上传失败！err: ", err)
            this.$message.error('上传失败!');
          })
        }).catch(err => {
          console.log("乘船指南上传失败！err: ", err)
          this.$message.error('上传失败!');
          reject()
        });
      })
    },
    //`slidePictures/${fileName}`
    handleSlideImageRemove(file, imageListArr) {
      // console.log("handleSlideImageRemove: ", file, imageListArr);
      if (file.status !== "success") return
      oss.deleteOne(file.name).then(res => {
        let index = this.imageNameArr.indexOf(file.name);
        this.imageNameArr.splice(index, 1);
        updateSlidePictures(this.imageNameArr).then(res => {
          console.log("首页轮播图删除成功！res: ", res)
          this.$message.success("删除成功！")
          // this.getSlidePictureList();
        }).catch(err => {
          console.log("首页轮播图删除失败！err: ", err)
        })
      }).catch(err => {
        this.$message.error("删除失败！")
      })
    },
    handleBaochuanIconRemove(file, imageListArr) {
      if (file.status !== "success") return
      oss.deleteOne(file.name).then(res => {
        deleteBaochuanIcon().then(res => {
          this.$message.success("删除成功！")
        }).catch(err => {
          console.log("删除失败！err: ", err)
        })
      }).catch(err => {
        this.$message.error("删除失败！")
      })
    },
    handlePinchuanIconRemove(file, imageListArr) {
      if (file.status !== "success") return
      oss.deleteOne(file.name).then(res => {
        deletePinchuanIcon().then(res => {
          this.$message.success("删除成功！")
        }).catch(err => {
          console.log("删除失败！err: ", err)
        })
      }).catch(err => {
        this.$message.error("删除失败！")
      })
    },
    handlePrivacyFileRemove(file, fileList) {
      console.log("handlePrivacyFileRemove file,fileList: ", file, fileList)
      if (file.status !== "success") return //要进行删除处理的文件必须是之前已成功上传过的文件
      oss.deleteOne(file.name).then(res => {
        let tempArr = [];
        this.tempPrivacyFileList.forEach(item => {
          if (item.name !== file.name) tempArr.push(item.name)
        })
        let fileNames = tempArr.length === 0 ? "empty" : tempArr.join(",");
        // debugger
        updatePrivacyFiles(fileNames).then(res => {
          //上传成功
          console.log("隐私条款文件删除成功！res: ", res)
          this.tempPrivacyFileList = this.privacyFileList = fileList;
          this.$message.success("删除成功！")
        }).catch(err => {
          console.log("隐私条款文件删除失败！err: ", err)
        })

      }).catch(err => {
        this.$message.error("删除失败！")
      })
    },
    handleBoatingGuideFileRemove(file, fileList) {
      if (file.status !== "success") return
      oss.deleteOne("boatingGuideFile/" + file.name).then(res => {
        deleteBoatingGuideFile().then(res => {
          console.log("乘船指南删除成功！res: ", res)
          this.$message.success("删除成功！")
        }).catch(err => {
          console.log("乘船指南删除失败！err: ", err)
          this.$message.error('删除失败!');
        })
      }).catch(err => {
        this.$message.error("删除失败！")
      })
    },
    handleImagePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    imageListSizeExceed() {
      this.$message.error('最多只允许上传5张图片 !');
    },
    baochuanIconListSizeExceed() {
      this.$message.error('最多只允许上传1张图片 !');
    },
    privacyFileListSizeExceed() {
      this.$message.error('乘船须知最多只允许上传5个文件 !');
    },
    boatingGuideFileListSizeExceed() {
      this.$message.error('乘船指南最多只允许上传1个文件 !');
    },
    //获取轮播图列表
    getSlidePictureList() {
      oss.listDir("slidePictures/").then(res => {
        console.log("mounted listDir res= ", res)
        this.slideImgSize = res.objects.length;
        if (res.objects.length > 0) {
          let tempArr = [];
          this.imageNameArr = [];
          res.objects.forEach((item, index) => {
            // debugger
            tempArr.push({
              name: item.name,
              url: oss.signatureUrl(item.name),
            });
            this.imageNameArr.push(item.name);
          })
          this.imageListArr = tempArr;
        }
        // debugger
      }).catch(err => {
        console.log("mounted listDir err= ", err)
      });
    },
    //获取系统文档资源列表
    getDocumentFileList() {
      // oss.listDir("boatingNoticeFile/").then(res => {
      //   if (res.objects.length > 0) {
      //     let tempArr = [];
      //     res.objects.forEach((item, index) => {
      //       tempArr.push({
      //         name: item.name,
      //         url: oss.signatureUrl(item.name),
      //       });
      //     })
      //     this.privacyFileList = tempArr;
      //   }
      // }).catch(err => {
      //   console.log("getDocumentFileList listDir err= ", err)
      // });

      oss.listDir("boatingGuideFile/").then(res => {
        if (res.objects.length > 0) {
          let tempArr = [];
          res.objects.forEach((item, index) => {
            tempArr.push({
              name: item.name.substring(item.name.lastIndexOf("/") + 1),
              url: oss.signatureUrl(item.name),
            });
          })
          this.boatingGuideFileList = tempArr;
        }
      }).catch(err => {
        console.log("getDocumentFileList listDir err= ", err)
      });
    },
    // 获取首页包船与拼船的描述文字及小图标
    getDescAndIconList() {
      oss.listDir("baochuanIcon/").then(res => {
        if (res.objects.length > 0) {
          let tempArr = [];
          res.objects.forEach((item, index) => {
            tempArr.push({
              name: item.name,
              url: oss.signatureUrl(item.name),
            });
          })
          this.baochuanIconList = tempArr;
        }
      }).catch(err => {
        console.log("getDescAndIconList listDir err= ", err)
      });

      oss.listDir("pinchuanIcon/").then(res => {
        if (res.objects.length > 0) {
          let tempArr = [];
          res.objects.forEach((item, index) => {
            tempArr.push({
              name: item.name,
              url: oss.signatureUrl(item.name),
            });
          })
          this.pinchuanIconList = tempArr;
        }
      }).catch(err => {
        console.log("getDocumentFileList listDir err= ", err)
      });
    },
    saveBaochuanDescText() {
      updateBaochuanDescText(this.sysResource.baochuanDescText).then(res => {
        this.$message.success("保存成功！")
      }).catch(err => {
        this.$message.error("保存失败！")
      })
    },
    savePinchuanDescText() {
      updatePinchuanDescText(this.sysResource.pinchuanDescText).then(res => {
        this.$message.success("保存成功！")
      }).catch(err => {
        this.$message.error("保存失败！")
      })
    },
    //UEditor富文本编辑器准备完成
    boatingNoticeContentUeditorReady(editor) {
      console.log("boatingNoticeContentUeditorReady execute.")
      // editor.execCommand('fontSize', '14px');
    },
    boatingGuideContentUeditorReady(editor) {
      console.log("boatingGuideContentUeditorReady execute.")
      // editor.execCommand('fontSize', '14px');
    },
    aboutWeUeditorReady(editor) {
      console.log("aboutWeUeditorReady execute.")
      // editor.execCommand('fontSize', '14px');
    },
    submitBoatingNoticeContent() {
      updateBoatingNoticeContent(this.sysResource.boatingNoticeContent).then(res => {
        this.$message.success("提交成功！")
      }).catch(err => {
        this.$message.error("提交失败！")
      })
    },
    submitBoatingGuideContent() {
      updateBoatingGuideContent(this.sysResource.boatingGuideContent).then(res => {
        this.$message.success("提交成功！")
      }).catch(err => {
        this.$message.error("提交失败！")
      })
    },
    submitAboutWe() {
      updateAboutWe(this.sysResource.aboutWe).then(res => {
        this.$message.success("提交成功！")
      }).catch(err => {
        this.$message.error("提交失败！")
      })
    }
  }
}
</script>

<style scoped>
.document-upload {
  width: 550px;
  margin-top: 5px;
  margin-left: 20px;
}

>>> .slide-image-upload .el-upload--picture-card {
  width: 180px;
  height: 180px;
  line-height: 180px;
  /*margin-top: 10px;*/
  /*margin-left: 10px;*/
}

>>> .slide-image-upload .el-upload-list__item {
  width: 180px;
  height: 180px;
}

.icon-upload {
  margin-top: 5px;
  margin-left: 10px;
}

>>> .icon-upload .el-upload--picture-card {
  width: 80px;
  height: 80px;
  line-height: 80px;
  /*margin-top: 10px;*/
  /*margin-left: 10px;*/
}

>>> .icon-upload .el-upload-list__item {
  width: 80px;
  height: 80px;
}

.desc_content {
  margin-top: 20px;
}

>>> .desc_content .el-textarea {
  display: block;
  width: 500px;
  margin-left: 10px;
}

.desc_content_input {
  display: flex;
  align-items: flex-end;
}

.desc_content_input button {
  height: 30px;
  margin-left: 10px;
}

</style>
